<template>
    <comHead  :datas="datasObj"></comHead>

    <view class="settings page pd-30">

        <text class="ft c-99">{{ "开启后会接收到推送通知，不开启则消息只显示在消息栏目内。" }}</text>
        <view class="mt-24 pd-20 flex-bwt card" v-for="(item, index) in cardList" :key="index">
            <view>
                <view class="ft1">{{ item.title }}</view>
                <view class="ft mt-12 c-99">{{ item.desc }}</view>
            </view>
            <view class="ft flex">
                <text class="ft ft-22 mr-10 c-99">{{ item.isOpen === false ? "已关闭" : "已开启" }}</text>
                <!-- <up-switch v-model="item.isOpen"  @change="changeBtn(item.code,item.isOpen)" activeColor="#333333"></up-switch> -->
                <image class="icon" mode="widthFix" src="https://cdn.oss.bon-top.cn/static_bc/images/setting_open.png"
                    @click="changeBtn(item.code, false)" v-if="item.isOpen === true"></image>
                <image class="icon" mode="widthFix" src="https://cdn.oss.bon-top.cn/static_bc/images/setting_close.png"
                    @click="changeBtn(item.code, true)" v-if="item.isOpen === false"></image>
            </view>
        </view>
        <view class="mt-24 card1 pd-20">
            <text class="ft1">{{ "互动通知" }}</text>
            <view class="item mt-20 pd-20 flex-bwt" v-for="(item, index) in cardList1" :key="index">
                <text class="ft">{{ item.title }}</text>
                <view class="ft flex">
                    <text class="ft ft-22 mr-10 c-99">{{ item.isOpen === false ? "已关闭" : "已开启" }}</text>
                    <!-- <up-switch v-model="item.isOpen"  @change="changeBtn(item.code,item.isOpen)" activeColor="#333333"></up-switch> -->
                    <image class="icon" mode="widthFix"
                        src="https://cdn.oss.bon-top.cn/static_bc/images/setting_open.png"
                        @click="changeBtn(item.code, false)" v-if="item.isOpen === true"></image>
                    <image class="icon" mode="widthFix"
                        src="https://cdn.oss.bon-top.cn/static_bc/images/setting_close.png"
                        @click="changeBtn(item.code, true)" v-if="item.isOpen === false"></image>
                </view>
            </view>

        </view>
        <view class="mt-24 pd-20 flex-bwt card">
            <view>
                <view class="ft1">{{ "咨询消息" }}</view>
                <view class="ft mt-12 c-99">{{ "咨询的回复通知" }}</view>
            </view>
            <view class="ft flex">
                <text class="ft ft-22 mr-10 c-99">{{ zixunOpen === false ? "已关闭" : "已开启" }}</text>
                <image class="icon" mode="widthFix" src="https://cdn.oss.bon-top.cn/static_bc/images/setting_open.png"
                    @click="changeBtn('consultMessage', false)" v-if="zixunOpen === true"></image>
                <image class="icon" mode="widthFix" src="https://cdn.oss.bon-top.cn/static_bc/images/setting_close.png"
                    @click="changeBtn('consultMessage', true)" v-if="zixunOpen === false"></image>
            </view>
        </view>
    </view>
</template>

<script lang="js" setup>
import { ref, reactive, onMounted } from "vue";
import comHead from '@/components/comHead.vue';
let datasObj = reactive({
    title: '消息设置',
    img: '',
    color: '#f8f8f8',
    direction: '',
    scrollTop: 0,
    noBack: false,
    isBorder: true

})
import { utils } from "@/utils/utils.js";
import { api } from "@/utils/api.js";

const cardList = ref([
    { title: "系统通知", icon: 'https://cdn.oss.bon-top.cn/static_bc/images/system.png', desc: '恭喜您注册成功', time: '2024-10-28 19:23', num: '10', isOpen: false, code: 'systemMessage' },
    { title: "订单交易", icon: 'https://cdn.oss.bon-top.cn/static_bc/images/jiaoyi.png', desc: '有一条订单待支付', time: '2024-10-28 19:23', num: '10', isOpen: false, code: 'orderMessage' },
    { title: "活动优惠", icon: 'https://cdn.oss.bon-top.cn/static_bc/images/activity.png', desc: '本周白菜移民价已出炉', time: '2024-10-28 19:23', num: '10', isOpen: false, code: 'activityMessage' },

])
const cardList1 = ref([
    { title: "评论", isOpen: false, code: 'commentMessage' },
    { title: "问答", isOpen: false, code: 'qaMessage' },
    { title: "点赞", isOpen: false, code: 'likeMessage' },
    { title: "分享", isOpen: false, code: 'shareMessage' }
])

const settingData = ref({})
const getSignData = () => {
    utils.request(api.getMessageSet, {

    }, 'get').then((res) => {
        settingData.value = res.data.info;
        cardList.value[0].isOpen = settingData.value.systemMessage;
        cardList.value[1].isOpen = settingData.value.orderMessage;
        cardList.value[2].isOpen = settingData.value.activityMessage;

        cardList1.value[0].isOpen = settingData.value.commentMessage
        cardList1.value[1].isOpen = settingData.value.qaMessage
        cardList1.value[2].isOpen = settingData.value.likeMessage
        cardList1.value[3].isOpen = settingData.value.shareMessage
        zixunOpen.value = settingData.value.consultMessage
    })
}

const changeBtn = (code, bool) => {
    const data = {
        [code]: bool
    };
    utils.request(api.doMessageSet, data, 'post').then((res) => {
        getSignData();
    });
}

const zixunOpen = ref(false)
onMounted(() => {
    getSignData()
})
</script>

<style lang="scss" scoped>
.card {
    width: 100%;
    height: 124rpx;
    background: #F8F8F8;
    border-radius: 40rpx;
}

.card1 {
    width: 690rpx;
    height: 450rpx;
    background: #F8F8F8;
    border-radius: 40rpx;

    .item {
        width: 650rpx;
        height: 74rpx;
        background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
        border-radius: 20rpx;
    }
}

::v-deep .u-switch__node--on {
    background-color: #DBF046 !important;
}

.icon {
    width: 68rpx;   height: 36rpx;
}
</style>